<template>
  <div class="cinema-list-wrap">
      <ul class="cinema-list">
        <li v-for="item in cinemaList" :key="item.cinemaId">
          <!-- <router-link :to="{}"> -->
          <div class="cinema-item-warp flex justify-between">
            <div class="">
              <div class="cinemas-info">
                <span class="cinema-name ellipsis">{{ item.name }}</span>
                <span class="cinema-address ellipsis">{{ item.address }}</span>
              </div>
            </div>
            <div class="">
              <div class="cinema-price">
                <span class="cinema-lowPrice price-fmt">
                  <i>￥</i><span class="interge" style="font-size: 15px;">25</span>
                  <span style="display: none;">.</span>
                  <span class="decimal" style="font-size: 15px;"></span>
                  <span style="display: none;">.</span>
                  <span class="decimal" style="font-size: 15px; display: none;">00</span>
                </span>
                <span class="upon">起</span>
              </div>
              <span class="cinema-gpsAddress">
                距离未知
              </span>
            </div>
          </div>
          <!-- </router-link> -->
        </li>
      </ul>
    <!-- <router-view></router-view> -->
    </div>
</template>
<style lang="scss">
@import "~@/assets/styles/mixin.scss";
.cinema-list-wrap {
  // height: calc( 100vh - 1rem );
  height: calc( 100vh - 46px );
  overflow: hidden;
  position: relative; // 修正滚动条的位置
}
.cinema-list {
  li {
    padding: .14rem;
    background-color: #fff;
    @include border-b-1px(#ededed);
  }
}
.cinemas-info {
  width: calc(100vw - .84rem);
  span {
    display: block;
    width: 100%;
  }
}
.cinema-name {
  color: #191a1b;
  font-size: .15rem;
}

.cinema-price {
  font-size: .15rem;
  color: #ff5f16;
}
.cinema-address, .cinema-gpsAddress {
  display: block;
  font-size: .12rem;
  color: #797d82;
  margin-top: .02rem;
}
</style>
